<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            background-color: #192128;
        }

        .box {
            width: 85%;
            margin: auto;
        }

        .shang {
            width: 100%;
        }

        .shang img {
            width: 100%;
        }

        .zhong {
            margin-top: 20px;
            width: 100%;
            height: 50px;
            position: relative;
        }

        .ss {
            background-color: #141727;
            width: 300px;
            height: 30px;
            position: absolute;
            left: 600px;
            border: 2px solid #8d754d;
        }

        .xia {
            margin-top: 20px;
            width: 100%;
        }

        ul {
            margin-left: 20px;
        }

        ul li {
            width: 200px;
            height: 280px;
            list-style: none;
            border: 1px solid #292b3d;
            float: left;
            margin-right: 35px;
            margin-top: 30px;
            transition: all 5px;
        }

        ul img {
            width: 197px;
            height: 250px;
        }

        ul li p {
            text-align: center;
        }

        ul li:hover {
            border: 2px solid #8d754d;
            transform: translateY(5px);
        }

        .mtk {
            width: 500px;
            height: 600px;
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            z-index: 11;
            display: none;
        }

        .mtk img {
            width: 150px;
            height: 150px;

        }

        .s {
            margin-top: 20px;
            height: 40px;
            border-bottom: 2px solid #f4f4f4;
        }

        .z {
            display: flex;
            margin-top: 30px;
            width: 100%;
        }

        ol {
            width: 450px;
            margin-left: 20px;
        }

        ol li {
            list-style: none;
        }

        .z span {
            margin-top: 30px;
        }

        .gb {
            float: right;
            font-size: 30px;
            margin-top: -30px;
        }

        .x {
            margin-top: 20px;
        }

        .zzc {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: 10;
            display: none;
        }

        .gb:hover {
            border: 2px solid #c2dbfe;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="shang">
            <img src="./高清海报.gif" alt="">
        </div>
        <div class="zhong">
            <input type="text" placeholder="检索" class="ss"><button class="find" style="margin-left: 950px; margin-top: 2px;">搜索</button>
        </div>
        <div class="xia">
            <ul>
                <!-- <li>
                    <img src="./高清海报.gif" alt="">
                    <p>安妮</p>
                </li> -->
            </ul>
        </div>
        <div class="mtk" style="background-color: white;">
            <div class="s" style="background-color: white;">
                <p class="mc" style="background-color: white;"></p><span class="gb"
                    style="background-color: white;">×</span>
            </div>
            <div class="z" style="background-color: white;">
                <img src="" alt="" class="tp">
                <ol style="background-color: white;">
                    <li class="gj" style=" background-color: #198754; border-radius: 5px;">攻击:</li><br>
                    <li class="fy" style=" background-color: #11caf0; border-radius: 5px;">防御:</li><br>
                    <li class="mf" style=" background-color: #ffc009; border-radius: 5px;">魔法:</li><br>
                    <li class="nd" style=" background-color: #db3544; border-radius: 5px;">难度:</li>
                </ol>
            </div>
            <div class="x">
                <p style="background-color: white;">拥有危险夺命的能力，却长着一副小大人的可爱模样，这就是掌握不可测占火魔法的女孩————安妮</p>
            </div>
        </div>
        <div class="zzc">

        </div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var ul = document.querySelector('ul')
    var ss = document.querySelector('.ss')
    var box = document.querySelector('.box')
    var mtk = document.querySelector('.mtk')
    var zzc = document.querySelector('.zzc')
    function render(zt) {
        var status=zt?zt:''
        if(zt){
            axios.get(`https://hmajax.itheima.net/api/lol/search`).then(res => {
            const dataStr = res.data.data;
            console.log(dataStr);
            const str = status.map((ele, index) => {
                return `
                <li data-id="${ele.heroId}">
                    <img src="${ele.icon}" alt="">
                    <p>${ele.title}</p>
                </li>`
            }).join('')
            ul.innerHTML = str
        })
        }else{
            axios.get(`https://hmajax.itheima.net/api/lol/search`).then(res => {
            const dataStr = res.data.data;
            console.log(dataStr);
            const str = dataStr.map((ele, index) => {
                return `
                <li data-id="${ele.heroId}">
                    <img src="${ele.icon}" alt="">
                    <p>${ele.title}</p>
                </li>`
            }).join('')
            ul.innerHTML = str
        })
        }
    }
    render()
    box.addEventListener('click', function (e) {
        var theId = e.target.parentNode.dataset.id;
        console.log(theId);
        if (e.target.tagName == 'IMG') {
            axios.get(`https://hmajax.itheima.net/api/lol/info?id=${theId}`).then(res => {
                console.log(res);
                mtk.style.display = 'block'
                zzc.style.display = 'block'
                var arr = res.data.data.hero;
                console.log(arr);
                var mc = document.querySelector('.mc')
                var tp = document.querySelector('.tp')
                var gj = document.querySelector('.gj')
                var fy = document.querySelector('.fy')
                var mf = document.querySelector('.mf')
                var nd = document.querySelector('.nd')
                mc.innerHTML = arr.name + arr.title;
                tp.src = arr.icon;
                gj.style.width = arr.attack + '0%'
                fy.style.width = arr.defence + '0%'
                mf.style.width = arr.magic + '0%'
                nd.style.width = arr.difficulty + '0%'
            })
        }
        if (e.target.className == 'gb') {
            mtk.style.display = 'none'
            zzc.style.display = 'none'
        }
        if(e.target.className=='find'){
            if(ss.value.trim()!=''){
                axios.get(`https://hmajax.itheima.net/api/lol/search?q=${ss.value}`).then(res=>{
                    console.log(res.data.data);
                    render(res.data.data)
                })
            }else{
                alert('内容不允许为空！')
            }
            
        }
    })

</script>